<template>
  <div class="page-wrapper">
    <div class="header-wrapper">
      <h2 class="top">
        <van-icon class="back-icon" @click="fanhui" name="arrow-left" size="30px" />
        <span class="title-text">申请服务</span>
      </h2>
    </div>
    <div class="tuan-dui">
      <div class="tu-pian">
        <img :src="doctor.imageUrl" alt="文章图片" />
      </div>
      <!--    团队-->
      <div class="tuan-dui-text">
        <span class="tuan-dui-text-title">{{doctor.doctorName}}</span><br><br>
        <span class="jigo">{{doctor.position}}</span><br>
      </div>
    </div>
    <div class="article-text">
      <van-cell >申请人
        <span style="margin-left: 40px">&emsp;{{ user.realName }}</span>
      </van-cell>
      <!--      提醒天数-->
      <van-cell>服务包
        <span style="margin-left: 40px">&emsp;{{ servicePackage.packageName }}</span>
      </van-cell>
      <!--  单位-->
      <van-cell is-link @click="showPopup3">服务项目
        <span style="margin-left: 40px">{{ serviceItem }}</span>
      </van-cell>
      <van-popup class="van-popup1" v-model="show3" position="bottom" :round="true">
        <div class="time-picker-container">
          <van-picker
              show-toolbar
              title="标题"
              :columns="columns1"
              @cancel="onCancel2"
              @confirm="onConfirm2"
          />
        </div>
      </van-popup>
      <van-cell is-link @click="showPopup2">服务地点
        <span style="margin-left: 40px">{{ serviceLocation }}</span>
      </van-cell>
      <van-popup class="van-popup1" v-model="show2" position="bottom" :round="true">
        <div class="time-picker-container">
          <van-picker
              show-toolbar
              title="标题"
              :columns="columns2"
              @cancel="onCancel1"
              @confirm="onConfirm1"
          />
        </div>
      </van-popup>

      <van-cell is-link @click="showPopup1">服务时间
        <span  style="margin-left: 40px">
          <span v-if="serviceTime === '请选择服务时间'">
            请选择服务时间
          </span>
            {{ serviceTime | format('yyyy-MM-dd hh:mm:ss')}}
          </span>
      </van-cell>
      <van-popup class="van-popup1" v-model="show4" position="bottom" :round="true">
        <div class="time-picker-container">
          <van-datetime-picker
              v-model="currentDate"
              type="datetime"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="onCancel3"
              @confirm="onConfirm3"
          />
        </div>
      </van-popup>
      <van-cell-group>
        <van-field
            type="textarea"
            v-model="note"
            label="备注"
            placeholder="请填写备注"
            rows="2"
            autosize
            maxlength="50"
            show-word-limit
        />
      </van-cell-group>
    </div>

    <van-address-list
        add-button-text="提交申请"
        @add="onAdd"
    />
  </div>
</template>

<script>
import {Toast} from "vant-green";

export default {
  data() {
    return {
      show: false,
      doctorId: 0,
      doctor: {},
      doctorTeam: {},
      servicePackage: {},
      servicePackageItem: [],
      user: {},
      show1:false,
      show2:false,
      show3:false,
      show4:false,
      checked:0,
      note:'',
      medicationTime:'12:00',
      serviceTime: '请选择服务时间',
      serviceLocation: '请选择服务地点',
      serviceItem: '请选择服务项目',
      columns1: [],
      columns2: ['机构门诊', '患者家中'],
      minHour: 10,
      maxHour: 20,
      minDate: new Date(2023, 1, 1),
      maxDate: new Date(2025, 12, 1),
      currentDate: new Date(),
      form:{}
    };
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
  methods: {
    onConfirm2(value, index) {
      this.show3 = false;

      this.serviceItem = value;
    },
    onCancel2() {
      this.show3 = false;
    },
    showPopup2() {
      this.show2 = true
    },
    showPopup1(){
      this.show4 = true
    },
    showPopup3() {
      this.show3 = true
      this.servicePackageItem.forEach(item => {
        if (item.fee ===false){
          this.columns1.push(item.itemName+' '+'不限次数');
        }else {
          this.columns1.push(item.itemName+' '+' 剩余'+item.remainingTimes +"次");
        }

      });
    },
    onConfirm1(value, index) {
      this.show2 = false;
      this.serviceLocation = value;
    },
    onCancel1() {
      this.show2 = false;
    },
    onConfirm3(value, index) {
      this.show4 = false;
      this.serviceTime = value;
    },
    onCancel3(){
      this.show4 = false;

    },
    fanhui(){
      this.$router.back()
    },
    onAdd() {
      if (
          !this.serviceItem === "请选择服务项目" ||
          this.serviceLocation === "请选择服务地点" ||
          this.serviceTime === "请选择服务时间" ||
          !this.note === ''
      ) {
        Toast("请填写所有必填项");
        return;
      }
      const form={
        applicantId:this.user.id,
        doctorId:this.doctorId,
        serviceItem:this.serviceItem,
        servicePackageName:this.servicePackage.packageName,
        serviceLocation:this.serviceLocation,
        serviceTime:this.serviceTime,
        note:this.note,
      }
      this.servicePackageItem.forEach(item => {
        if (this.serviceItem.includes(item.itemName)){
          console.log(item.itemName);
          form.serviceItem=item.itemName;
        }

      });

      this.axios.post(`http://localhost:10086/api/service/service_application/add`,form).then(res=>{
        if (res.data.code !== 200){
          this.$message.error('申请失败');
        }else {

          Toast('申请成功')
          setTimeout(() => {
            this.$router.push({path: '/result', query: {serviceNumber: res.data.data}});
          },666)
        }
      })

    },
    findAll() {
      this.axios.get(`http://localhost:10086/api/doctor/doctor/findDoctorList/${this.doctorId}`)
          .then(response => {
            if (response.data.code !== 200){
              this.$message.error('获取医生信息失败');
            }
            this.doctor = response.data.data.doctor;
            this.doctorTeam = response.data.data.doctorTeam;
            this.servicePackage = response.data.data.servicePackage;
            this.servicePackageItem = response.data.data.servicePackageItem;
            this.user = response.data.data.user;
          })
          .catch(function (error) {
            console.log(error);
          });
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({name: 'login'});
      });
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
    this.doctorId = JSON.parse(localStorage.getItem("doctorId"));
    this.findAll();
  },

};
</script>

<style scoped>
.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}
.article-text{
  padding: 20px  0px;
  width: 100%;
  height: auto;
}

.article-text p {
  font-size: 12px;
  color: gray;
}


.jigo {
  color: dimgrey;
}

.tuan-dui-text {
  width: 200px;
  height: 100px;
  float: left;
  margin-left: 10px;
  margin-top: 40px;
}

.tuan-dui-text-title {
  font-size: 20px;
  color: black;
}

.tu-pian {
  width: 150px;
  height: 150px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}

.tu-pian img {
  width: 120px;
  height: 120px;
  float: left;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 128, 255, 0.2);
  margin-left: 15px;
  margin-top: 15px;
}

.tuan-dui {
  width: 100%;
  height: 170px;
  background-color: #ffffff;
}

.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

img {
  //background-color: red;
  width: 100%;
  height: 100%;
}
</style>